<template>
    <div id="calculator" class="bg-white rounded-xl shadow-lg p-6 transform transition-all hover:shadow-xl w-full">
      <h2 class="text-xl font-semibold text-purple-700 mb-4 flex items-center">
        <i class="fas fa-calculator mr-2"></i> 计算器
      </h2>
      
      <div class="space-y-4">
        <div class="flex space-x-3">
          <input 
            v-model.number="num1" 
            type="number" 
            class="flex-1 p-3 border border-gray-300 rounded focus:ring-2 focus:ring-purple-500 focus:outline-none"
            placeholder="数字1"
          >
          <span class="self-center text-gray-500 text-xl">+</span>
          <input 
            v-model.number="num2" 
            type="number" 
            class="flex-1 p-3 border border-gray-300 rounded focus:ring-2 focus:ring-purple-500 focus:outline-none"
            placeholder="数字2"
          >
        </div>
        
        <button 
          @click="calculate" 
          :disabled="calculating"
          class="w-full py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center justify-center"
          :class="{'opacity-75 cursor-not-allowed': calculating}"
        >
          <i v-if="calculating" class="fas fa-spinner fa-spin mr-2"></i>
          <i v-else class="fas fa-equals mr-2"></i>
          计算结果
        </button>
        
        <div v-if="result !== null" class="p-4 bg-purple-50 rounded-lg text-center transition-all">
          <p class="text-xl font-semibold">结果: <span class="text-purple-700">{{ result }}</span></p>
        </div>
        
        <div v-if="calcError" class="p-3 bg-red-50 text-red-700 rounded-lg">
          <i class="fas fa-exclamation-triangle mr-2"></i>{{ calcError }}
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import  { calculate } from '@/api/modules/system'
  
  export default {
    name: 'Calculator',
    data() {
      return {
        num1: 5,
        num2: 10,
        result: null,
        calculating: false,
        calcError: null
      }
    },
    methods: {
      async calculate() {
        this.calculating = true
        this.calcError = null
        
        try {
          const data = await calculate(this.num1, this.num2)
          console.info('计算结果信息:', data)
          this.result = data // 直接使用返回的data
        } catch (err) {
          this.calcError = err.message || '计算时发生错误'
          console.error('计算错误:', err)
        } finally {
          this.calculating = false
        }
      }
    }
  }
  </script>